/**
 * 表单处理
 */

import React, { Component } from 'react'


// 子组件
class Child extends Component {
  render () {
    return (
      <div>
        <h2>我是子组件</h2>
      </div>
    )
  }
}


// 父组件
class Index extends Component {

  // 定义响应数据
  state = {
    // 输入框的值
    val: ''
  }

  // 非受控组件：ref(获取DOM元素/组件实例)
  inputRef = React.createRef()

  childRef = React.createRef()


  // 受控组件：v-model（双向绑定）
  // 输入框事件处理函数
  valChange = (e) => {
    // console.log(e.target.value)
    // 改变数据=》刷新视图
    this.setState({
      //key:val
      val: e.target.value
    })
  }

  // 提交
  handlerSub = (e) => {
    // 组织表单默认行为
    e.preventDefault()
    // 获取表单数据
    console.log(this.state)
    console.log('获取input ref:', this.inputRef, this.inputRef.current.value)
    this.inputRef.current.style.background = 'red'
    this.inputRef.current.style.color = 'white'
    console.log('获取类组件实例：', this.childRef)
  }

  render () {
    return (
      <div>
        <h1>react 表单处理</h1>
        {/* 表单 */}
        <form onSubmit={this.handlerSub}>
          <h1>{this.state.val}</h1>
          {/* 双向绑定 */}
          <input value={this.state.val} onChange={this.valChange} type="text" />
          {/* ref对象 */}
          <input ref={this.inputRef} type="text" />
          <button type="submit">提交</button>
        </form>
        <hr />
        <Child ref={this.childRef} />
      </div>
    )
  }
}

export default Index